<template>
  <div class="container">
<h1>求和为：{{ sum }},科目{{ subject }}</h1>
<select v-model.number="num">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
<button @click="add">加</button>
<button @click="sub">减</button>
  </div>
</template>

<script lang="ts" setup name="Count">
import {ref} from "vue"
import {useCountStore} from "@/store/Count"
import { storeToRefs } from "pinia"

// 数据
const countStore=useCountStore()
const {sum,subject}=storeToRefs(countStore)
let num=ref(1)

// 方法
function add() {
  // 修改数据：第一种方法
  // countStore.sum+=num.value
  // countStore.subject="英语"

  //第二种方法
  // countStore.$patch({
  //   sum:2,
  //   subject:"英语"
  // })

  //第三种方法
  countStore.jia(num.value)
}
function sub() {
 countStore.sum-=num.value
}
</script>

<style scoped>
.container{
  background-color: skyblue;
  border-radius: 20px;
  padding: 20px;
}
select,button{
height: 25px;
margin-right: 5px;
}
</style>